<template>
    <div class="container my-5 text-center">
        <h5 class="text-muted">定义参数</h5>

        <div class="row g-3 my-3">
            <div class="col-4">
                <label for="row" class="form-label">行数</label>
                <input
                    type="number"
                    v-model="row"
                    class="form-control"
                    id="row"
                    placeholder="请输入行数"
                />
            </div>

            <div class="col-4">
                <label for="col" class="form-label">列数</label>
                <input
                    type="number"
                    v-model="col"
                    class="form-control"
                    id="col"
                    placeholder="请输入列数"
                />
            </div>

            <div class="col-4">
                <label for="col" class="form-label">幸运者</label>
                <input
                    type="number"
                    v-model="winnerCount"
                    class="form-control"
                    id="col"
                    placeholder="请输入列数"
                />
            </div>
        </div>

        <h5 class="text-muted mb-3">座位号</h5>
        <div class="list-item">
            <div
                :style="`width: ${itemWidth}%;`"
                class="item"
                :class="{ active: currentIndex === index }"
                v-for="(item, index) in sum"
                :key="item"
            >
                {{ item }}
            </div>
        </div>

        <h3 class="text-muted my-3 text-center">
            🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 恭喜你 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
        </h3>
        <section class="show-container my-3">
            {{ winner.join(' ') }}
        </section>

        <button class="btn btn-primary btn-block" @click="start">
            幸运的你在哪里
        </button>

        <button
            class="btn btn-success btn-block"
            :class="{ disabled: flag }"
            @click="end"
        >
            在这里
        </button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            row: 5,
            col: 5,
            winnerCount: 5,
            winner: [],
            intervalId: 0,
            currentIndex: 0,
            flag: true,
        };
    },
    computed: {
        itemWidth() {
            return 90 / this.col;
        },
        sum() {
            return this.row * this.col;
        },
    },
    methods: {
        start() {
            if (!this.flag) {
                return;
            }
            this.flag = false;
            this.intervalId = setInterval(() => {
                this.currentIndex = Math.floor(Math.random() * this.sum);
            }, 10);
        },
        end() {
            this.flag = true;
            let winner = [];
            do {
                let num = Math.ceil(Math.random() * this.sum);
                if (!winner.includes(num)) {
                    winner.push(num);
                }
            } while (winner.length !== Number(this.winnerCount));
            this.winner = winner;
            this.currentIndex = -1;
            clearInterval(this.intervalId);
        },
    },
};
</script>

<style>
.list-item {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.item {
    height: 50px;
    background-color: #336699;
    border-radius: 5px;
    color: #fff;
    font-weight: 900;
    font-size: 30px;
    margin: 3px;
    text-align: center;
}

.active {
    background-color: orange;
}

.show-container {
    width: 100%;
    color: orange;
    background-color: #999;
    border-radius: 8px;
    line-height: 300px;
    min-height: 300px;
    text-align: center;
    font-size: 48px;
    font-weight: 900;
}
</style>
